<template>
    <div style="height: 100%">
        <el-container class="member-grade-page">
            <div class="content-header">
                <el-row type="flex" class="row-bg" justify="space-between" style="padding: 10px 10px">
                    <el-col :span="6" class="header-title">订阅列表</el-col>
                    <el-col :span="6">
                    </el-col>
                </el-row>
            </div>
            <el-main>
                <el-table ref="grade_table" :data="dataList" height="100%" v-loading="loading">
                    <el-table-column prop="client" label="设备编号" width="280"/>
                    <el-table-column prop="filter" label="主题"/>
                    <el-table-column  label="消息质量" width="80">
                        <template slot-scope="props">
                            Qos &nbsp; {{props.row.qos}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="pid" label="进程标识" />
                    <el-table-column prop="clean" label="CleanSession" width="180"/>
                    <el-table-column prop="created_at" label="订阅时间" sortable>
                        <template slot-scope="props">
                            {{props.row.created_at|secondToDate}}

                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-link
                                    size="mini" plain
                                    type="primary"
                                    icon="el-icon-delete"
                                    :underline="false"
                                    style="margin-right: 5px;font-size: 11px"
                                    @click="remove(scope.row)">删除
                            </el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>

            <el-footer class="content-table-pagination">
                <el-pagination
                        background
                        :current-page="pagination.current_page"
                        layout="total,prev, pager, next"
                        @current-change="getData"
                        :total="pagination.totalCount">
                </el-pagination>
            </el-footer>

        </el-container>

        <el-dialog
                title="添加授权应用"
                center
                :visible.sync="dialogShow"
                width="30%">

            <el-form label-position="right" :model="app" :rules="rules" :label-width="label_width" ref="addUser">
                <el-form-item  label="应用名称" prop="app_name"  size="small">
                    <el-input
                            auto-complete="new-password"
                            placeholder="请输入账号"
                            v-model="app.app_name"/>
                </el-form-item>

                <el-form-item prop="remark" label="备注信息"  size="small">
                    <el-input type="textarea"
                              :rows="5"
                              placeholder="请输入备注"
                              v-model="app.remark"/>
                </el-form-item>
            </el-form>
            <template slot="footer" class="dialog-footer">
                <el-button plain size="small" type="primary" @click="add">保 存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import {get_subscribe} from "../api/himq_http";
    import {formatTime} from "../comm/date_utils";

    export default {
        name: "MqttUser",
        data() {
            return {
                dataList: [],
                loading: false,
                dialogShow: false,
                label_width: "80px",
                pagination: {
                    totalCount: 0,
                    current_page: 1
                },
                app: {
                    app_name: '',
                    remark: '',
                },
                rules: {
                    app_name: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 5, max: 26, message: '账号长度在5到26个字符', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 5, message: '密码长度在5到16个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getData(1)
        },
        filters:{
          secondToDate(s){
              return formatTime(s*1000,"Y-M-D h:m:s")
          },
        },
        methods: {
            getData(page) {
                console.log(page)
                this.loading = true;
                let that = this;
                get_subscribe({page:page,page_size: 10}).then(
                    resp => {
                        that.loading = false;
                        that.dataList = resp.data.items;
                        that.pagination.totalCount = resp.data.count;
                    }, err => {
                        that.loading = false;
                        console.log(err.message)
                    }
                )
            },
        }
    }
</script>

<style scoped>

</style>